import { useParams, useNavigate } from "react-router-dom";
import { stuInfoSelector, requestId, alertInfo } from "../store";
import { useRecoilValueLoadable, useRecoilState, useSetRecoilState } from "recoil";
import { deleteStuByIdApi } from "../api/stuApi";

function Detail() {
  // 获取路由参数
  const { id } = useParams();

  // 获取导航方法
  const navigate = useNavigate();

  // 根据 id 去后台获取数据
  const stuInfoLoadable = useRecoilValueLoadable(stuInfoSelector(id));

  // 拿到请求 id
  const [reqId, setReqId] = useRecoilState(requestId);

  // 获取设置 alert 的方法
  const setAlert = useSetRecoilState(alertInfo);

  // 删除学生
  const deleteStu = (id: string) => {
    // 这里我们会遇到一个问题，就是本地仓库的数据和后台数据不一致
    if (window.confirm("确定要删除吗？")) {
      const newReqId = reqId + 1;
      setReqId(newReqId);
      deleteStuByIdApi(id).then(()=>{
        setAlert({
          message: "删除成功",
          type: "warning",
        });
        navigate("/");
      })
    }
  };

  // 接下来根据 stuInfoLoadable 的状态来显示不同的内容
  switch (stuInfoLoadable.state) {
    case "hasValue": {
      const stuInfo = stuInfoLoadable.contents;
      return (
        <div className="details container">
          <button className="btn btn-default" onClick={() => navigate("/")}>
            返回
          </button>

          <h1 className="page-header">
            {stuInfo.stuname}
            <span className="pull-right">
              <button
                className="btn btn-primary"
                onClick={() => navigate(`/edit/${stuInfo._id}`)}
                style={{ marginRight: 10 }}
              >
                修改
              </button>
              <button
                className="btn btn-danger"
                onClick={() => deleteStu(stuInfo._id)}
              >
                删除
              </button>
            </span>
          </h1>
          {/* 第一组 */}
          <ul className="list-group">
            <li className="list-group-item">
              <span className="glyphicon glyphicon-phone">
                电话：{stuInfo.phone}
              </span>
            </li>
            <li className="list-group-item">
              <span className="glyphicon glyphicon-envelope">
                邮箱：{stuInfo.email}
              </span>
            </li>
          </ul>
          {/* 第二组 */}
          <ul className="list-group">
            <li className="list-group-item">
              <span className="glyphicon glyphicon-book">
                文化水平：{stuInfo.education}
              </span>
            </li>
            <li className="list-group-item">
              <span className="glyphicon glyphicon-flag">
                毕业院校：{stuInfo.graduationschool}
              </span>
            </li>
            <li className="list-group-item">
              <span className="glyphicon glyphicon-briefcase">
                专业：{stuInfo.profession}
              </span>
            </li>
            <li className="list-group-item">
              <span className="glyphicon glyphicon-user">
                个人简介：{stuInfo.profile}
              </span>
            </li>
          </ul>
        </div>
      );
    }
    case "loading": {
      return <div>加载中...</div>;
    }
  }
}

export default Detail;
